<template>
	<view class="page">
		<view class="article-wrap">
			<view class="title">
				选大学认准这些标签不吃亏：省部共建、部省合建、省部部共建……
			</view>
			<view class="time">
				2020-11-15 10:11:25
			</view>
			<view class="cont">
				爬虫或富文本编辑的内容展示爬虫或富文本编辑的内容展示爬虫或富文本编辑的内容展示
			</view>
		</view>
		<!-- 评论 -->
		<view class="remark-wrap">
			<view class="title">
				评论
			</view>
			<view class="item">
				<view class="lf">
					<view class="touxiang">
						<image src="../../static/logo.png" mode=""></image>
					</view>
				</view>
				<view class="rt">
					<view class="head">
						<view class="name">
							袁敏
						</view>
						<view class="date">
							11-25
						</view>
					</view>
					<view class="body">
						这里是用户评价内容，这里是用户评价内容这里 价内容这里是用户评价内
					</view>
					<view class="foot">
						<view class="" @click.stop="replyToggle">
							<image class="icon" src="../../static/chakanhuifu-icon.png"></image>
							<view class="text">
								查看回复
							</view>
						</view>
						<view class="" @click.stop="reportToggle">
							<image class="icon" src="../../static/jubao-icon.png"></image>
							<view class="text">
								举报
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部评论框 -->
		<view class="fixed-wrap">
			<input type="text" placeholder="写下你的评论…" placeholder-class="placeholder">
		</view>

		<!-- 全部回复-弹窗 -->
		<view class="popup-wrap" v-if="replyPopup">
			<view class="mask"></view>
			<view class="popup-cont-wrap">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="popup-title">
						全部回复
					</view>
					<view class="popup-cont">
						<view class="item" v-for="(index,item) in 5" :key="index">
							<view class="lf">
								<view class="touxiang">
									<image src="../../static/logo.png" mode=""></image>
								</view>
							</view>
							<view class="rt">
								<view class="head">
									<view class="name">
										袁敏
									</view>
									<view class="date">
										11-25
									</view>
								</view>
								<view class="body">
									这里是用户评价内容，这里是用户评价内容这里 价内容这里是用户评价内
								</view>
								<view class="foot">
									<view class="">
										<image class="icon" src="../../static/chakanhuifu-icon.png"></image>
										<view class="text">
											查看回复
										</view>
									</view>
									<view class="">
										<image class="icon" src="../../static/jubao-icon.png"></image>
										<view class="text">
											举报
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<image @click.stop="replyToggle" class="close-btn" src="../../static/close-icon.png" mode=""></image>
			</view>
		</view>

		<!-- 举报-弹窗 -->
		<view class="popup-wrap" v-if="reportPopup">
			<view class="mask"></view>
			<view class="popup-cont-wrap">
				<view class="scroll-Y" @scrolltolower="lower">
					<view class="popup-title">
						举报
						<view class="text">
							请选择举报理由
						</view>
					</view>
					<view class="popup-cont">
						<checkbox-group @change="checkboxChange">
							<label v-for="item in reportReason" :key="item.value">
								<checkbox :value="item.value" :checked="item.checked" />
								{{item.name}}
							</label>
						</checkbox-group>
						<view class="btn" @click.stop="reportSubmit">
							提交
						</view>
					</view>
				</view>
				<image @click.stop="reportToggle" class="close-btn" src="../../static/close-icon.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				replyPopup: false, //全部回复
				reportPopup: false, //举报
				reportReason: [
					{
						value: '1',
						name: '垃圾广告信息'
					},
					{
						value: '2',
						name: '不实信息'
					},
					{
						value: '3',
						name: '辱骂，人身攻击等不友善行为'
					},
					{
						value: '4',
						name: '有害信息'
					},
					{
						value: '5',
						name: '涉嫌侵权'
					},
					{
						value: '6',
						name: '诱导赞同，关注等行为'
					},
				]
			}
		},
		methods: {
			checkboxChange: function(e) {
				let items = this.reportReason,
					values = e.detail.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			// 举报提交
			reportSubmit:function(){
				let that = this;
				for (var i = 0; i < that.reportReason.length; i++) {
					if (that.reportReason[i].checked) {
						console.log(that.reportReason[i].name)
					}
				}
				console.log('举报提交',that.reportReason)
			},
			lower: function(e) {
				console.log('到底了', e)
			},
			// 查看回复-弹窗
			replyToggle: function() {
				let that = this;
				that.replyPopup = !that.replyPopup;
			},
			// 举报-弹窗
			reportToggle:function(){
				let that = this;
				that.reportPopup = !that.reportPopup;
			}
		}
	}
</script>

<style lang="scss" scoped="">
	@import 'circleDetail.scss'
</style>
